import {Component} from '@angular/core';
import {CountryService} from '../service/countryservice';

@Component({
    templateUrl: './autocompletedemo.html'
})
export class AutoCompleteDemo {

  country: any;
  countries: any[];
  filteredCountriesSingle: any[];
  filteredCountriesMultiple: any[];
  brands: string[] = ['Audi','BMW','Fiat','Ford','Honda','Jaguar','Mercedes','Renault','Volvo','VW'];
  filteredBrands: any[];
  brand: string;

  constructor(private countryService: CountryService) { }

  filterCountrySingle(event) {
      let query = event.query;
  //   this.countryService.getCountries().take(countries => {
  //     this.filteredCountriesSingle = this.filterCountry(query, countries);
    // });
  }

  filterCountryMultiple(event) {
      let query = event.query;
  //  this.countryService.getCountries().then(countries => {
  // this.filteredCountriesMultiple = this.filterCountry(query, countries);
  // });
  }

  filterCountry(query, countries: any[]):any[] {

      let filtered : any[] = [];
      for(let i = 0; i < countries.length; i++) {
          let country = countries[i];
          if(country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
              filtered.push(country);
          }
      }
      return filtered;
  }

  filterBrands(event) {
      this.filteredBrands = [];
      for(let i = 0; i < this.brands.length; i++) {
          let brand = this.brands[i];
          if(brand.toLowerCase().indexOf(event.query.toLowerCase()) == 0) {
              this.filteredBrands.push(brand);
          }
      }
  }

  handleDropdownClick() {
      this.filteredBrands = [];

      setTimeout(() => {
          this.filteredBrands = this.brands;
      }, 100)
  }
}
